<template>
    <div class="pagecontainer">
        <span class="pagespan">共{{itemtotal}}条</span>
        <button class="pagebutton prebutton" @click="prePage" :class="{disabled:activePage == 1}"> <</button>
        <ul class="pageul">
            <li class="pageli"
                v-for="item in pageArray"
                :class="{active:item == activePage}"
                @click="pageClick(item)"
            >
                {{item}}
            </li>
        </ul>
        <button class="pagebutton nextbutton" @click="nextPage" :class="{disabled:activePage == pagetotal}"> ></button>
        <span class="pagespan">前往 <input class="jumppage" v-model.number="jumppage" @keyup.enter="jumpPage">页</span>
    </div>
</template>

<script>
    module.exports = {
        name: 'page',
        data: function () {
            return {
                pageArray: [],
                jumppage: this.currentPage
            }
        },
        computed: {
            activePage: function () {
                return this.currentPage
            },
            itemtotal: function () {
                return this.itemTotal
            },
            pagetotal: function () {
                return Math.ceil(this.itemtotal / this.pagesize)
            },
            pagesize: function () {
                return this.pageSize
            },
            isHavaPreDot: function () {
                return (this.activePage - 2) > 3
            },
            isHaveNextDot: function () {
                return (this.activePage + 2) < (this.pagetotal - 2)
            }
        },
        props: {
            currentPage: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            itemTotal: Number
        },
        watch: {
            "currentPage": function () {
                this.getPagearray();
                this.jumppage = this.currentPage;
            },
            "pageSize": function () {
                this.getPagearray()
            },
            "itemTotal": function () {
                this.getPagearray()
            }
        },
        methods: {
            getPagearray: function () {
                var vm = this;
                vm.pageArray = [];
                //前后都有...
                if (vm.isHavaPreDot && vm.isHaveNextDot) {
                    for (var i = 0; i < 5; i++) {
                        vm.pageArray.push(vm.activePage + i - 2)
                    }
                    vm.pageArray.unshift(1, '...');
                    vm.pageArray.push('...', vm.pagetotal)
                }
                //前面有...
                else if (vm.isHavaPreDot && !vm.isHaveNextDot) {
                    for (var i = vm.pagetotal - 5; i <= vm.pagetotal; i++) {
                        vm.pageArray.push(i)
                    }
                    vm.pageArray.unshift(1, '...')
                }
                //后面有...
                else if (!vm.isHavaPreDot && vm.isHaveNextDot) {
                    for (var i = 0; i <= 5; i++) {
                        vm.pageArray.push(i + 1)
                    }
                    vm.pageArray.push('...', vm.pagetotal)
                }
                //没有...
                else if (!vm.isHavaPreDot && !vm.isHaveNextDot) {
                    for (var i = 0; i < vm.pagetotal; i++) {
                        vm.pageArray.push(i + 1)
                    }
                }
            },
            pageClick: function (item) {
                if (item !== '...' && item !== this.activePage) {
                    this.$emit('pageChange', item)
                }
            },
            prePage: function () {
                if (this.activePage > 1) {
                    this.$emit('pageChange', this.activePage - 1)
                }
            },
            nextPage: function () {
                if (this.activePage < this.pagetotal) {
                    this.$emit('pageChange', this.activePage + 1)
                }
            },
            jumpPage: function () {
                this.$emit('pageChange', this.jumppage)
            }
        },
        mounted: function () {
            this.getPagearray()
        }
    }
</script>

<style>
    .pagecontainer{
        font-size: 0;
    }
    .pagespan,.pagebutton,.pageul{
        font-size: 14px;
    }
    .pagespan{
        margin:0 6px;
    }
    .pageul, .pageul li {
        display: inline-block;
        margin: 0;
    }
    li.pageli {
        padding: 0 4px;
        border: 1px solid #d1dbe5;
        border-right: 0;
        background: #fff;
        font-size: 13px;
        min-width: 28px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
    }
    .pageli.active {
        border-color: #20a0ff;
        background-color: #20a0ff;
        color: #fff;
        cursor: default;
    }
    .pagebutton{
        background: 50% no-repeat;
        background-size: 16px;
        background-color: #fff;
        border: 1px solid #d1dbe5;
        cursor: pointer;
        margin: 0;
        color: #97a8be;
        padding:5px 7px;
    }
    .prebutton{
        border-right: 0;
    }
    .jumppage{
        border: 1px solid #d1dbe5;
        border-radius: 2px;
        line-height: 18px;
        padding: 4px 2px;
        width: 30px;
        text-align: center;
        margin: 0 6px;
        box-sizing: border-box;
        transition: border .3s;
        outline: none;
    }
    .pagebutton.disabled{
        color: #e4e4e4;
        background-color: #fff;
        cursor: not-allowed
    }
</style>